<template>
    <div>
        <setHeader title="编辑" settext="保存" @done="gotobtn()"></setHeader>
        <div class="content">
            <!-- 海报图片 -->
            <div class="main_poster_img">
                <img src="../common/images/tx2.jpg" alt="">
            </div>
            <!-- 编辑图片的底部导航 -->
            <div class="main_poster_editor_nav">
                <ul>
                    <li>
                        <i class="iconfont icon-xingzhuang-wenzi"></i>
                        <span>文本</span>
                    </li>
                    <li>
                        <i class="iconfont icon-tupian"></i>
                        <span>图片</span>
                    </li>
                    <li>
                        <i class="iconfont icon-xingzhuang-juxing"></i>
                        <span>形状</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            gotobtn() {
                this.$router.push({
                    path: '/posterSave'
                })
            }
        },
        components: {
            setHeader
        }
    }
</script>

<style>
.main_poster_img {
    width: 7.1rem;
    margin: 0.2rem auto;
}
.main_poster_img img {
    width: 100%;
}
.main_poster_editor_nav {
    height: 1.1rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #f5f5f5;
}
.main_poster_editor_nav ul {
    display: flex;
    justify-content: space-between;
    padding: 0.12rem 0;
    box-sizing: border-box;
}
.main_poster_editor_nav ul>li {
    text-align: center;
    flex: 1;
    font-size: 0.22rem;
    color: #333;
}
.main_poster_editor_nav ul>li span {
    display: block;
}
.main_poster_editor_nav ul>li .icon-tupian,
.main_poster_editor_nav ul>li .icon-xingzhuang-juxing,
.main_poster_editor_nav ul>li .icon-xingzhuang-wenzi {
    font-size: 0.48rem;
    color: #333;
    display: block;
}
</style>